<template>
    <el-dialog title="物流进度" v-model="progressDialogVisible" width="50%">
      <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :hollow="activity.hollow"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import expressData from '../../../api/express.js'
  // 对话框的显示和隐藏
  const progressDialogVisible = ref(false)
  
  // 物流进度数据
  const activities = ref(expressData.data)
  // 打开对话框
  const open = () => {
    progressDialogVisible.value = true
  }
  defineExpose({ open })
  </script>
  
  <style lang="scss" scoped>
  </style>